<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<label>
    用户名: <input id="username" type="text">
</label>
<label for="remember">
    <input id="remember" name="" type="checkbox">记住用户名
</label>

<script>
    const username = document.querySelector('#username');
    const remember = document.querySelector('#remember');

    if (window.localStorage.getItem('username')) {
        username.value = window.localStorage.getItem('username');
        remember.checked = true;
    }

    // 复选框发生的是change改变事件
    remember.addEventListener('change', function () {
        if (this.checked) {
            window.localStorage.setItem('username', username.value)
        } else {
            window.localStorage.removeItem('username')
        }
    })


</script>
</body>
</html>
